<template>
	<view>
<uni-transition mode-class='fade' :show="props.isShowList">
    <view class="list">
        <view class="avatar" @click="goHome">
            <image class="avatarImg" src="../static/logo.png"></image>
        </view>
        <view class="normal">
            <image src="../static/love.png" @click="changeLove"></image>
            <text>710</text>
        </view>
        <view class="normal">
            <image src="../static/comment.png" @click="openComment"></image>
            <text>200</text>
        </view>
        <view class="normal" @click="openForward">
            <image src="../static/forward.png"></image>
            <text>100</text>
        </view>
        <view class="normal">
            <image src="../static/save.png"></image>
            <text>50</text>
        </view>
        <view class="music">
            <image src="../static/logo.png"></image>
        </view>
    </view>
</uni-transition>
<uni-popup ref="popComment">
    <view class="comment">
        <uni-nav-bar title="2022条评论" :border="false" rightIcon="back"></uni-nav-bar>
        <uni-list :border="false" v-for="item in commentList">
            <uni-list-item :border="false">
                <template v-slot:header>
                    <view class="commentHeader" style="display: flex;">
                        <image class="userImage" :src="item.avatar"></image>
                        <view class="nameAndComment">
                            <view class="name">{{item.name}}</view>
                            <view class="commentOne">{{item.comment}}</view>
                            <view class="time">}{{item.day}} &nbsp;山东</view>
                        </view>
                    </view>
                </template>
                <template v-slot:footer>
                    <view class="commentFooter">
                        <image src="../static/smallLove.png"></image>
                        <text>{{item.like}}万</text>
                        <image src="../static/brokeHeart.png"></image>
                    </view>
                </template>
            </uni-list-item>
            <uni-transition ref="goMoreComment" :show="showMoreComment">
                <view style="padding-left: 30px;" v-for="itemin in commentList.splice(0,Math.random()*7)">

                        <uni-list-item :border="false">
                            <template v-slot:header>
                                <view style="display: flex;">
                                    <image class="userImage" src="../static/logo.png"></image>
                                    <view class="nameAndComment">
                                        <view class="name">fbk</view>
                                        <view class="commentOne">hhhhhhhhhhhhhhhhhhhhhhh</view>
                                        <view class="time">昨天22:15 &nbsp;山东</view>
                                    </view>
                                </view>
                            </template>
                            <template v-slot:footer>
                                <view class="commentFooter">
                                    <image src="../static/smallLove.png"></image>
                                    <text>2.5万</text>
                                    <image src="../static/brokeHeart.png"></image>
                                </view>
                            </template>
                        </uni-list-item>
                        <uni-list-item :border="false">
                            <template v-slot:header>
                                <view style="display: flex;">
                                    <image class="userImage" src="../static/logo.png"></image>
                                    <view class="nameAndComment">
                                        <view class="name">fbk</view>
                                        <view class="commentOne">hhhhhhhhhhhhhhhhhhhhhhh</view>
                                        <view class="time">昨天22:15 &nbsp;山东</view>
                                    </view>
                                </view>
                            </template>
                            <template v-slot:footer>
                                <view class="commentFooter">
                                    <image src="../static/smallLove.png"></image>
                                    <text>2.5万</text>
                                    <image src="../static/brokeHeart.png"></image>
                                </view>
                            </template>
                        </uni-list-item>

                </view>

            </uni-transition>
            <uni-list-item :border="false">
                <template v-slot:header>
                    <view class="findmore">
                        <view class="line"></view>
                        <view class="text" @click="clickMoreComment">展开121条回复</view>
                        <svg t="1671607016223" class="icon" viewBox="0 0 1024 1024" version="1.1"
                            xmlns="http://www.w3.org/2000/svg" p-id="4680" width="10" height="10">
                            <path
                                d="M979.0208 301.99808l-47.104-47.04768-419.98848 419.9424-419.89632-419.9424-47.0528 47.0528 419.89632 419.93728v0.00512l47.09888 47.104 47.04256-47.0528z"
                                fill="#bfbfbf" p-id="4681"></path>
                        </svg>
                    </view>
                </template>
            </uni-list-item>
        </uni-list>
    </view>
</uni-popup>

<uni-popup  ref="forwardRef">
	<view class="forwardClass">
		<view>
			分享给朋友
		</view>
		<scroll-view scroll-x="true" class="scrollView">
			<view class="friend" v-for="item in avatarList">
				<image :src="item.avatar"></image>
				<view>{{item.name}}</view>
			</view>
		</scroll-view>
	</view>
</uni-popup>
		
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted,
		reactive
	} from "vue";
	let popComment = ref(null)
	let goMoreComment = ref(null)
	let showMoreComment = ref(false)
	let forwardRef=ref(null)
	const props = defineProps({
		isShowList: {
			require: true
		}
	})
	onMounted(() => {
		popComment.value.open('bottom')
	})
	const goHome = () => {
		console.log(1)
		uni.navigateTo({
			url: '/pages/otherSelf/otherSelf'
		})
	}
	const changeLove = () => {

	}
	const openComment = () => {
		if(true){
		popComment.value.open('bottom')
		}
	}
	const clickMoreComment = () => {
		showMoreComment.value = true
	}
	const avatarList = reactive([{
			avatar: '../../static/avatar/1.jpg',
			name: 'fbk'
		},
		{
			avatar: '../../static/avatar/2.jpg',
			name: 'lzs'
		},
		{
			avatar: '../../static/avatar/3.jpg',
			name: 'lhy'
		},
		{
			avatar: '../../static/avatar/4.jpg',
			name: 'hahha'
		},
		{
			avatar: '../../static/avatar/5.jpg',
			name: '奥里给'
		},
		{
			avatar: '../../static/avatar/6.jpg',
			name: '牛波一'
		},
		{
			avatar: '../../static/avatar/7.jpg',
			name: '大外孙'
		},
		{
			avatar: '../../static/avatar/8.jpg',
			name: '我看行'
		}
	])
	const commentList=reactive([
		{
			avatar:'./static/avatar/1.jpg',
			name:'大外孙',
			comment:'我是牛波一',
			day:'今天10:25',
			like:Math.floor(Math.random()*9)+""+Math.floor(Math.random()*9)
		},
		{
			avatar:'../static/avatar/2.jpg',
			name:'fbk',
			comment:'大外孙你牛波一',
			day:'昨天22:15',
			like:Math.floor(Math.random()*9)+""+Math.floor(Math.random()*9)
		},
		{
			avatar:'../static/avatar/3.jpg',
			name:'牛波一',
			comment:'好噶哈哈哈哈',
			day:'昨天14：11',
			like:Math.floor(Math.random()*9)+""+Math.floor(Math.random()*9)
		},
		{
			avatar:'../static/avatar/4.jpg',
			name:'哈哈哈',
			comment:'笑死我了柯',
			day:'今天08:56',
			like:Math.floor(Math.random()*9)+""+Math.floor(Math.random()*9)
		},
		{
			avatar:'../static/avatar/5.jpg',
			name:'沉淀',
			comment:'你的消费可不低',
			day:'昨天22:15',
			like:Math.floor(Math.random()*9)+""+Math.floor(Math.random()*9)
		},
		{
			avatar:'../static/avatar/6.jpg',
			name:'奥里给',
			comment:'加油奥里给',
			day:'今天10：10',
			like:Math.floor(Math.random()*9)+""+Math.floor(Math.random()*9)
		},
		{
			avatar:'../static/avatar/7.jpg',
			name:'冬泳怪哥',
			comment:'运到困难不用怕',
			day:'今天15：20',
			like:Math.floor(Math.random()*9)+""+Math.floor(Math.random()*9)
		},
	])
	const openForward=()=>{
		forwardRef.value.open('bottom')
	}
</script>

<style scoped lang="scss">
	.list {
		width: 50px;
		height: 400px;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		position: fixed;
		right: 5px;
		bottom: 50px;
        .avatar{
			background-color: white;
			border-radius: 50px;
		}
		.music{
			background-color: white;
			border-radius: 10px;
			image{
				width: 90%;
				height: 90%;
				border-radius: 10px;
			}
		}
		view {
			width: 100%;
			height: 50px;
			display: flex;
			text-align: center;
			justify-content: center;
			flex-direction: column;
			align-items: center;
			color: white;
         
			.avatarImg {
				width: 90%;
				height: 90%;
				border-radius: 100%;
			}

			image {
				width: 70%;
				height: 70%;
			}
		}
	}

	.comment {
		width: 100%;
		height: 500px;
		background-color: white;
		border-top-left-radius: 10px;
		border-top-right-radius: 10px;
	}

	.userImage {
		display: block;
		width: 30px;
		height: 30px;
		border-radius: 30px;
	}

	.nameAndComment {
		margin-left: 20px;
		.name {
			color: gray;
			font-size: 15px;
		}

		.commentOne {
			color: black;
			font-weight: 500;
			font-size: 18px;
		}

		.time {
			color: grey;
			font-size: 10px;
		}

	}

	.commentFooter {
		display: flex;
		align-items: flex-end;
		image {
			width: 15px;
			height: 15px;
		}

		text {
			color: gray;
			font-size: 10px;
			padding-right: 10px;
		}
	}

	.findmore {
		display: flex;
		align-items: center;

		.line {
			width: 30px;
			margin-right: 20px;
			border-bottom: 1px solid black;
		}

		.text {
			color: gray;
			font-size: 10px;
		}
	}
	.commentHeader{
		display: flex;
		
	}
	.forwardClass{
		width: 100%;
		height: 300px;
		background-color: white;
		border-top-left-radius: 5px;
		border-top-right-radius: 5px;
	}
	.scrollView {
		margin-top: 20px;
		white-space: nowrap;
		width: 100%;
	}
	
	.friend {
		display: inline-block;
		height: 70px;
		width: 70px;
		text-align: center;
		// display: flex;
		// flex-wrap: wrap;
		// justify-content: center;
	
		image {
			width: 50px;
			height: 50px;
			border-radius: 50px;
		}
	}
</style>
